<template>
	<view >
		<view
			v-if="isMiniApp"
			class="window"
			:style="{
				'height': height,
				'background-color': color
			}">
			<view
				class="inner"
				:style="{
					'right': right,
					'height': height2
				}">
				<view
					class="back"
					@click="handleBack">
					<uni-icons
						type="back"
						size="30"
						color="#fff">
					</uni-icons>
				</view>
				<view class="name">
					<text>{{ title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	
	export default {
		props: {
			color: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isMiniApp: false,
				height: '0px',
				right: '0px',
				height2: '0px'
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			this.isMiniApp = true;
			this.getInfo();
			console.log(app.globalData)
			// #endif
		},
		methods: {
			getInfo () {
				this.height = (app.globalData.windowInfo?.bottom || 83) + 'px';
				this.right = (app.globalData.menuButtonInfo.width|| 87) + 'px';
				this.height2 = (app.globalData.menuButtonInfo.height || 32) + 'px';
			},
			handleBack () {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less" scoped>
	.window {
		position: relative;
		z-index: 1;
		.inner {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			.back {
				width: 55px;
				text-align: center;
			}
			.name {
				flex: 1;
				font-size: 36rpx;
				color: #fff;
				text-align: center;
				margin: 0 40rpx 0 100rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
